<template>
  <div class="card" @click="$router.push(`/detail?id=${item.id}`)">
    <div class="hd">
      <img :src="item.avatar" alt="">
      <div class="title">
        <div class="main_title box1">{{ item.stem }}</div>
        <div class="sub_title">
          <span>{{ item.creator }}</span>
          <span> | </span>
          <span>{{ item.createdAt }}</span>
        </div>
      </div>
    </div>
    <div class="bd box2">{{ item.content }}</div>
    <div class="ft">
      <span>点赞 {{ item.likeCount }}</span>
      <span>|</span>
      <span>浏览 {{ item.views }}</span>
    </div>
    <!-- divider -->
    <div class="divider"></div>
  </div>

</template>

<script>
export default {
  name: 'InterViewCard',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="less" scoped>
  .box2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .box1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .card {
    padding: 10px 11px 0 11px;
    .hd {
      display: flex;
      margin-bottom: 10px;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .title {
        // flex: 1;

        .main_title {
          font-size: 16px;
          color: #333;
          font-weight: 700;
          margin-bottom: 5px;
        }

        .sub_title {
          font-size: 12px;
          color: #999;
        }
      }
    }
    
    .bd {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .ft {
      font-size: 12px;
      color: #999;
      span {
        margin-right: 5px;
      }
    }

    .divider {
      height: .5px;
      background-color: #eee;
      margin-top: 10px;
    }
  }
</style>